import React from 'react';
// import { Link } from 'react-router-dom';
import axios from 'axios';
import {apiPrefix} from 'shared/api';
import Input from '../../../../shared/input';
import AlertModule from '../../../../shared/AlertModule';

import './index.less';


export default class Home extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      newBook: {
        name: '',
        level: '',
        exp_date: ''
      },
      warn1: true,
      warn2: true,
      warn3: true,
      change: false,
      visible: false,
    };
  }
  componentDidMount() {
    if (this.props.match.params.id !== undefined) {
      const api = `${apiPrefix}api/v1/certificate/type?id=${this.props.match.params.id}`;
      axios.get(api)
        .then((response) => {
          this.setState({ newBook: response.data.data });
          console.log(this.state.newBook);
        });
    }
  }
  redirectToCertificateType() {
    this.props.history.push('/Certificate/CertificateType');
  }
  handlOnChang=(value, key) => {
    this.state.newBook[key] = value;
    this.setState({ newBook: { ...this.state.newBook }, change: true });
    console.log(this.state.change);
    console.log(this.state.newBook);
  }
  addBook=() => {
    const { newBook } = this.state;
    if (newBook.name === '' || newBook.name === undefined) {
      this.setState({ warn1: false });
    } else {
      this.setState({ warn1: true });
    }
    if (newBook.level === '' || newBook.level === undefined) {
      this.setState({ warn2: false });
    } else {
      this.setState({ warn2: true });
    }
    if (newBook.exp_date === '' || newBook.exp_date === undefined) {
      this.setState({ warn3: false });
    } else {
      this.setState({ warn3: true });
    }
    if (this.props.match.params.id === undefined) {
      const api = `${apiPrefix}api/v1/certificate/type`;
      axios.post(api, {
        name: newBook.name,
        level: newBook.level,
        exp_date: newBook.exp_date,
      })
        .then((response) => {
          if (response.data.code === 200) {
            this.redirectToCertificateType();
            // this.props.history.push('/Certificate/CertificateType');// 增加成功跳转回证书列表页
          }
        });
    } else {
      // 编辑证书
      const api = `${apiPrefix}api/v1/certificate/type?id=${this.props.match.params.id}`;
      axios.put(api, {
        name: newBook.name,
        level: newBook.level,
        exp_date: newBook.exp_date,
      })
        .then(() => {
          this.redirectToCertificateType();
        });
    }
  }
  showAlertModule=() => {
    if (this.state.change === true) {
      this.setState({ visible: true });
    } else {
      this.redirectToCertificateType();
    }
  }
  closeAlertModule=() => {
    this.setState({ visible: false });
  }
  historyPush=() => {
    this.redirectToCertificateType();
    this.setState({ visible: false });
  }
  render() {
    const id = this.props.match.params.id;
    const { visible, newBook } = this.state;
    return (
      <div className="test">
        <div>
          <div>
            <h3>{id ? '编辑证书类型' : '添加证书类型'}</h3>
          </div>
          <div className="messgeInput">
            <Input
              value={newBook.name}
              className="abs1"
              error={!this.state.warn1}
              errorMessage="*身份证必须填"
              label="请输入证书名:"
              placeholder="请输入证书名"
              inputKey="name"
              handlOnChang={this.handlOnChang}
            />
            <Input
              value={newBook.level}
              className="abs2"
              error={!this.state.warn2}
              label="证书等级:"
              placeholder="请输入证书等级"
              inputKey="level"
              handlOnChang={this.handlOnChang}
            />
            <Input
              value={newBook.exp_date}
              className="abs3"
              error={!this.state.warn3}
              label="证书有效期(月):"
              placeholder="只能输入数字"
              inputKey="exp_date"
              handlOnChang={this.handlOnChang}
            />
            <div className="messageButton abs4" style={{ marginTop: 50 }}>
              <button className="sure-button" onClick={this.addBook}>保存</button>
              <button onClick={this.showAlertModule} className="canel-button">取消</button>
              <AlertModule visible={visible} onCancel={this.closeAlertModule} onOk={this.historyPush} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
